<template>
  <div>
    <!-- 用户信息 -->
    <div class="user">
      <!-- 个人信息 (后台获取)-->
      <div class="user-infor">
        <div>
          <img class="self-img" src="static/Home-img/carousel01.png" @click="login()" />
        </div>
        <div>
          <div class="user-name">用户昵称</div>
          <div class="user-grade">用户等级</div>
        </div>
        <div>
          <img class="icon" src="static/Self-img/icon-self-chat.png" @click="chat()" />
        </div>
        <div>
          <img class="icon" src="static/Self-img/icon-self-set.png" @click="set()" />
        </div>
      </div>
      <!-- 收藏帖信息 -->
      <div class="msg">
        <div class="msg-p">
          <div>{{0}}</div>
          <p>发布</p>
        </div>
        <div class="msg-p" @click="hu()">
          <div>{{0}}</div>
          <p>收藏</p>
        </div>
        <div class="msg-p" @click="usa()">
          <div>{{0}}</div>
          <p>关注</p>
        </div>
        <div class="msg-p" @click="usb()">
          <div>{{0}}</div>
          <p>粉丝</p>
        </div>
      </div>
    </div>
    <!-- 商城订单信息 -->
    <div>
      <!-- 订单标题 -->
      <div class="shop">
        <div class="shop-title">我的订单</div>
        <div class="shop-infor" @click="more()">查看更多</div>
        <div>
          <img class="icon-self-arrow" src="static/Self-img/icon-self-arrow.png" />
        </div>
      </div>
      <!-- 订单具体信息 -->
      <div class="order">
        <div class="order-p" @click="order(index)" v-for="(item,index) in srcArr" :key="index">
          <img class="order-icon" :src="item.src" />
          <p v-text="item.name"></p>
        </div>
      </div>
    </div>
    <!-- 个人中心页面商城广告位 -->
    <div class="self-advert">
      <img class="self-advert-img" src="static/Home-img/carousel01.png" />
    </div>
    <!-- 工具与服务中心 -->
    <div class="service">
      <div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-vip.png" />
          </div>
          <div>
            <p class="service-text1">会员中心</p>
            <p class="service-text2">我是普通会员</p>
          </div>
        </div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-gold.png" />
          </div>
          <div>
            <p class="service-text1">金币任务</p>
            <p class="service-text2">做任务赚金币</p>
          </div>
        </div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-serve.png" />
          </div>
          <div>
            <p class="service-text1">商城服务</p>
            <p class="service-text2">帮助与客服</p>
          </div>
        </div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-opinion.png" />
          </div>
          <div>
            <p class="service-text1">意见反馈</p>
            <p class="service-text2">使用建议与反馈</p>
          </div>
        </div>
      </div>
      <div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-discount.png" />
          </div>
          <div>
            <p class="service-text1">我的优惠劵</p>
            <p class="service-text2">共{{0}}张</p>
          </div>
        </div>

        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-shop.png" />
          </div>
          <div>
            <p class="service-text1">金币商城</p>
            <p class="service-text2">金币兑好礼</p>
          </div>
        </div>
        <div class="service-item">
          <div>
            <img class="service-img" src="static/Self-img/icon-self-appointment.png" />
          </div>
          <div>
            <p class="service-text1">我的预约</p>
            <p class="service-text2">预约商品及订单</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div>
      <van-tabbar class="nav-tar" route>
        <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/add" icon="location-o">定位</van-tabbar-item>
        <van-tabbar-item to="/shop" icon="cart-circle-o">商城</van-tabbar-item>
        <van-tabbar-item to="/forum" icon="friends-o">论坛</van-tabbar-item>
        <van-tabbar-item to="/self" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      names: '',
      active: this.$route.query.name,
      // active: this.$route.query.index,
      srcArr: [
        { src: 'static/Self-img/icon-obligation.png', name: '待付款' },
        { src: 'static/Self-img/icon-send-goods.png', name: '待发货' },
        { src: 'static/Self-img/icon-wait-receive.png', name: '待收货' },
        { src: 'static/Self-img/icon-evaluate.png', name: '待评价' },
        { src: 'static/Self-img/icon-after-sale.png', name: '售后' }
      ]
    };
  },
  methods: {
    set() {
      //点击我的-右上角设置图标
      this.$router.push({
        name: 'Setting'
      });
    },
    chat() {
      //点击我的-右上角聊天图标
      alert('跳转到聊天页');
      // this.$router.push({
      //   name: 'Chat'
      // });
    },
    more() {
      // 点击查看更多,进行数据请求
      // console.log('点击更多传入全部',this.names);
      axios
        .post(
          '/api/Order/Select',
          {},
          {
            params: {
              name: '全部',
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
            }
          }
        )
        .then(res => {
          console.log(res);
        });
      this.$router.push({
        name: 'Order',
        query: {
          id: this.active
        }
      });
    },
    // 点击头像,登录
    login() {
      this.$router.push({
        name: 'Login'
      });
    },
    //订单
    order(index) {
      // this.names=index;
      console.log('点击小图标order', this.names);
      //点击获取数据带参
      axios
        .post(
          '/api/Order/Select',
          {},
          {
            params: {
              id: this.active,
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
            }
          }
        )
        .then(res => {
          console.log(res);
        });
      if (index !== 4) {
        // 跳转
        this.$router.push({
          name: 'Order',
          query: {
            id: this.active
            // items:item
          }
        });
      } else {
        this.$router.push({
          name: '售后'
        });
      }
    },
    //关注跳转
    usa() {
      this.$router.push({
        name: '粉丝',
        query: {
          fu: 'a'
        }
      });
    },
    usb() {
      this.$router.push({
        name: '粉丝',
        query: {
          fu: 'b'
        }
      });
    },
    hu() {
      this.$router.push({
        name: '收藏',
        query: {
          fc: 'b'
        }
      });
    }
  }
};
</script>
<style scoped>
.user {
  width: 37.5rem;
  height: 16rem;
  background-color: rgb(8, 99, 180);
  padding-top: 3rem;
  position: sticky;
  top: 0;
}
/* 导航图标样式 */
.icon {
  width: 3rem;
  margin-left: 2rem;
}
/* 用户个人信息 */
.self-img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin-left: 1rem;
}
.user-infor {
  display: flex;
}
.user-name {
  width: 15rem;
  margin-left: 2rem;
  margin-top: 3.5rem;
  font-size: 1.5rem;
  font-weight: bolder;
  color: white;
  border: white solid 0.1rem;
  display: flex;
  justify-content: center;
}
.user-grade {
  display: flex;
  justify-content: center;
  width: 6rem;
  margin-left: 2rem;
  border: white solid 0.1rem;
  border-radius: 1rem;
  margin-top: 0.5rem;
  background-color: white;
  opacity: 0.2;
  /* color: white; */
}
/* 关注帖样式 */
.msg {
  margin-top: 2rem;
  display: flex;
  justify-content: space-evenly;
  color: white;
  font-size: 1.5rem;
}
.msg-p {
  text-align: center;
}
/* 购买商品标题样式 */
.shop {
  display: flex;
  margin-top: 2rem;
}
.shop-title {
  font-size: 1.5rem;
  font-weight: bolder;
  margin-left: 2rem;
}
.icon-self-arrow {
  width: 2rem;
}
.shop-infor {
  margin-left: 22rem;
  margin-top: 0.2rem;
  color: gray;
}
/* 订单样式 */
.order {
  margin-top: 2rem;
  display: flex;
  justify-content: space-evenly;
}
.order-icon {
  width: 3rem;
}
.order-p {
  text-align: center;
}
/* 广告图片样式 */
.self-advert {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.self-advert-img {
  width: 35rem;
  border-radius: 0.5rem;
}
/* 工具与服务部分样式 */
.service-item {
  display: flex;
  margin-top: 2rem;
  align-items: center;
}
.service-img {
  width: 5rem;
  margin-right: 1rem;
}
.service {
  display: flex;
  justify-content: space-evenly;
  margin-top: 2rem;
}
.service-text1 {
  font-size: 1.5rem;
}
.service-text2 {
  font-size: 1rem;
  color: gray;
  margin-top: 0.5rem;
}
</style>